<template>
  <el-form ref="form" :rules="rules" :model="currentVideoQuestion" label-width="100px" class="demo-form">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card">
          <el-form-item label="题目" prop="title">
            <el-input v-model="currentVideoQuestion.title"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="addDomain">新增选项</el-button>
          </el-form-item>
          <template v-for="(domain, index) in currentVideoQuestion.opts" >
            <el-form-item
              :label="'选项' +index"
              :key="domain.key"
              :prop="getProp(index)"
              :rules="[{
      required: true, message: '选项不能为空', trigger: 'blur'
    }]">
              <el-row>
                <el-col :span="2">
                  <el-checkbox v-model="domain.checked" :label="keys[index]">
                  </el-checkbox>
                </el-col>
                <el-col :span="18">
                  <el-input v-model="domain.value"></el-input>
                </el-col>
                <el-col :span="2" style="margin-left: 5px">
                  <el-button @click.prevent="removeOption(domain)">删除</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </template>

          <el-form-item label="积分" prop="score" style="width: 300px;">
            <el-input type="number" :min="0" v-model="currentVideoQuestion.score"></el-input>
          </el-form-item>

          <el-form-item label="解析" prop="analysis">
            <el-input type="textarea" rows="4" v-model="currentVideoQuestion.analysis" height="300px"></el-input>
          </el-form-item>
        </el-card>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary"  @click="save('form')">保存</el-button>
      <el-button @click="back">返回</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import Editor from "@/components/editor";
import ImageUploader from "@/components/image-uploader";
import MediaUploader from "@/components/media-uploader";
export default {
  props: {
    isClose: Boolean,
    videoId: String
  },
  created() {},
  mounted() {
    // this.$watch("opts", val => {
    //   console.log(val, 11);
    //   if (val && val.length) {
    //     this.$set(this.currentVideoQuestion, "opts", []);
    //     var tem = val.split("\n");
    //     console.log(tem);
    //     var ans = this.currentVideoQuestion.answer.split("、");
    //     if (tem) {
    //       tem.map((item, index) => {
    //         var chek = false;
    //         ans.map((s, d) => {
    //           if (s === this.keys[index]) {
    //             chek = true;
    //           }
    //         });
    //         this.currentVideoQuestion.opts.push({
    //           value: item.substring(2, item.length),
    //           checked: chek,
    //           key: this.keys[index]
    //         });
    //       });
    //     }
    //   } else {
    //     this.currentVideoQuestion.opts = [];
    //   }
    // });
  },
  computed: {
    ...mapGetters({
      currentVideoQuestion: "currentVideoQuestion",
      keys: "keys",
      uploadImgAttr: "uploadImgAttr"
    }),
    opts() {
      return this.currentVideoQuestion.options;
    }
  },
  data() {
    return {
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
        ],
        score: [{ required: true, message: "请输入积分", trigger: "blur" }]
      }
    };
  },
  methods: {
    getProp(index) {
      return "opts." + index + ".value";
    },
    addDomain() {
      if (this.currentVideoQuestion.opts.length >= 8) {
        this.$message({
          message: "选项太多了，最多" + this.opts.length + "条选项！",
          type: "error"
        });
        return;
      }
      this.currentVideoQuestion.opts.push({
        value: "",
        checked: false,
        key: this.keys[this.currentVideoQuestion.opts.length]
      });
    },
    removeOption(item) {
      var index = this.currentVideoQuestion.opts.indexOf(item);
      if (index !== -1) {
        this.currentVideoQuestion.opts.splice(index, 1);
      }
    },
    save(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var opts = "";
          var answers = "";
          this.currentVideoQuestion.opts.map((item, index) => {
            opts += this.keys[index] + "、" + item.value + "\n";
            if (item.checked) {
              answers += this.keys[index] + "、";
            }
          });
          this.currentVideoQuestion.options = opts.substring(
            0,
            opts.length - 1
          );
          if (answers) {
            this.currentVideoQuestion.answer = answers.substring(
              0,
              answers.length - 1
            );
          } else {
            this.$message({
              message: "至少选择一个答案!",
              type: "error"
            });
            return;
          }
          this.currentVideoQuestion.videoId = this.videoId;
          this.$store
            .dispatch("addOrUpdateVideoQuestionS", this.currentVideoQuestion)
            .then(ret => {
              this.$notify({
                title: "添加成功",
                type: "success"
              });
              this.back();
            });
        } else {
          return false;
        }
      });
    },
    back() {
      this.$emit("close");
    }
  },
  components: { Editor, ImageUploader, MediaUploader }
};
</script>
<style>
</style>
